<template>
    <div>
      <el-form :inline="true" :model="operationform" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="operationform.name" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="operationform.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button @click="newOperation">新增</el-button>
      <el-table :data="operationList">
        <el-table-column label="项目名" prop="name" align="center"></el-table-column>
        <el-table-column label="价格" prop="price"align="center"></el-table-column>
        <el-table-column label="备注" prop="remark"align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteOperation(scope.row.id)">删除</el-button>
            <el-button @click="update(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%">
        <el-input type="hidden" v-model="operation.id"></el-input>
        业务名称：<el-input type="text" v-model="operation.name" style="width: 300px"></el-input><br><br>
        业务价格：<el-input type="text" v-model="operation.price"style="width: 300px"></el-input><br><br>
        备注：<el-input type="text" v-model="operation.remark"style="width: 300px"></el-input><br><br>

        <div v-if="title=='新增项目'">\
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOperation">确 定</el-button>
        </div>
        <div v-else>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateOperation">修 改</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  //js文件路径  src/system/operation.js
  import {queryOperation, addOperation,deleteOperation,updateOperation} from "@/api/system/operation"

    export default {
        name: "index",
      data() {
        return {
          title: '新增项目',
          dialogVisible: false,
          operationList: [],
          operation: {
            id:'',
            name: '',
            price:'',
            remark:''
          },
          operationform: {
            name: '',
            remark:'',
          },
        }
      },
      methods: {
        newOperation: function () {
          this.title = "新增项目";
          this.dialogVisible = true;
        },
        addOperation:function () {
          console.log(this.operation);
          addOperation(this.operation);
          this.queryAllOperation();
          this.dialogVisible=false;
        },
        queryAllOperation:function () {
          queryOperation(this.operationform).then(resp=> {
            console.log(resp);
            this.operationList=resp;
          })
        },
        update: function (s) {
          this.operation =s;
          this.title="修改患者";
          this.dialogVisible=true;
        },
        updateOperation:function () {
          console.log(this.operation);
          updateOperation(this.operation);
          //查询所有
          this.queryAllOperation();
          this.dialogVisible=false;
        },
        deleteOperation: async function (id) {
          var stu = {id: id};
          await deleteOperation(stu);
          //查询所有
          this.queryAllOperation();
        },
        onSubmit() {
          queryOperation(this.operationform).then(resp=> {
            console.log(resp);
            this.operationList=resp;
          })
        },
      },
      created() {
        this.queryAllOperation();
      }
    }
</script>

<style scoped>

</style>
